@extends('page')
@section('body')
    <style>
        .layui-input, .layui-select, .layui-textarea{
            height: 30px;
        }
        tbody>tr{
            height: 65px;
        }
        .layui-form-label{
            width: auto;
        }
    </style>
    <fieldset class="layui-elem-field">
        <?php $name = (new \App\Model\Category())->getTypeName($type)?>
        <legend>{{$name}}</legend>
        <div class="layui-field-box">
            <div class="layui-row">
                <div class="layui-col-md4 left">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{$name.'名称:'}}</label>
                            <div class="layui-input-block">
                                <input id="name" name="name" type="text" placeholder="{{$name.'名称:'}}" class="layui-input" autocomplete="off">
                            </div>
                        </div>
                        @if($type == \App\Model\Category::TYPE_CATE)
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{'父级'.$name.':'}}</label>
                            <div class="layui-input-block" style="line-height:36px">
                                <select id="parent">
                                    @foreach($categorys as $category)
                                        <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">{{$name.'图标:'}}</label>
                                <div class="layui-input-block" style="line-height: 36px">
                                    <input id="icons" name="icons" autocomplete="off" class="layui-input" placeholder="图标代码(参考google material icons)">
                                </div>
                            </div>
                        @endif
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{$name.'描述:'}}</label>
                            <div class="layui-input-block">
                                <textarea id="descript" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-small" onclick="postCategory.saveCategory();return false;">
                                    <i class="layui-icon">&#xe654;</i>
                                    {{'添加新'.$name}}
                                </button>
                                <button class="layui-btn layui-btn-small" onclick="return false;" id="file">
                                    <i class="layui-icon">&#xe67c;</i>{{'导入'.$name}}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-col-md8 right">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-input-inline" style="float: right;width: auto">
                                <button class="layui-btn layui-btn-small">
                                    {{'搜索'.$name}}
                                </button>
                            </div>
                            <div class="layui-input-inline" style="float: right;width: auto">
                                <input id="keyword" name="keyword" class="layui-input" type="text" autocomplete="off" value="{{$keyword}}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <select id="operate">
                                    <option value="operate">批量操作</option>
                                    <option value="deletes">删除</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <button class="layui-btn layui-btn-small" onclick="operate.apply()">
                                    应用
                                </button>
                            </div>
                            <div style="float: right" class="layui-input-inline">
                                <div id="count" style="text-align: right;line-height: 38px">{{\App\Services\CategoryService::CateCounts($type).'个项目'}}</div>
                            </div>
                        </div>
                    </form>
                    <div class="layui-form">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="50">
                                <col width="250">
                                <col width="200">
                                <col width="100">
                            </colgroup>
                            <thead>
                            <tr>
                                <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
                                    <div id="" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i>
                                    </div>
                                </th>
                                <th>名称</th>
                                <th>描述</th>
                                <th>总数</th>
                            </tr>
                            </thead>
                            <tbody id="categorys">
                            @foreach($cateList as $category)
                                <tr id="{{$category->id}}">
                                    <td colspan="1"><input type="checkbox" name="{{$category->id}}" lay-skin="primary" lay-filter="choose">
                                        <div data-title="{{$category->id}}" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                                    class="layui-icon"></i></div>
                                    </td>
                                    <td>
                                        <div id="{{$category->id.'-name'}}">{{$category->name}}</div>
                                        <span style="display: none" class="layui-breadcrumb" lay-separator="|">
                                            <a href="#" onclick="operate.edit('{{$category->id}}')">编辑</a>
                                            <a href="#" onclick="operate.quickEdit('{{$category->id}}')">快速编辑</a>
                                            <a style="color:#a00" href="#" onclick="operate.remove('{{$category->id}}')">删除</a>
                                            <a href="#" onclick="operate.view('{{$category->id}}')">查看</a>
                                        </span>
                                    </td>
                                    <td>
                                        <div>{{$category->descript}}</div>
                                    </td>
                                    <td>
                                        <div>{{$category->count}}</div>
                                    </td>
                                </tr>
                                <tr id="{{$category->id.'-hidden'}}" style="display: none">
                                    <td colspan="1"><input type="checkbox" name="{{$category->id}}" lay-skin="primary" lay-filter="choose">
                                        <div data-title="{{$category->id}}" class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                                    class="layui-icon"></i></div>
                                    </td>
                                    <td colspan="3">
                                        <div class="layui-form">
                                            <div>快速编辑</div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">名称</label>
                                                <div class="layui-input-block">
                                                    <input class="layui-input" id="{{$category->id.'-value'}}" type="text" autocomplete="off" value="{{$category->name}}">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"></label>
                                                <div class="layui-btn-primary layui-btn-small" style="float: left" onclick="operate.cancel('{{$category->id}}')">取消</div>
                                                <div class="layui-btn layui-btn-small" style="float: right" onclick="update('{{$category->id}}')">更新分类目录</div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <div>{{$cateList->render()}}</div>
                    </div>

                </div>
            </div>
        </div>
    </fieldset>
    <script>
        var form = null;
        layui.use(['form', 'layedit', 'laydate','upload'], function() {
            form = layui.form;
            form.render('select');
            //全选
            form.on('checkbox(allChoose)', function (data) {
                var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
                child.each(function (index, item) {
                    item.checked = data.elem.checked;
                });
                form.render('checkbox');
            });
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#file',//绑定元素
                data:{'type':'{{$type}}'}
                ,accept:'file'
                ,url: '{{url("admin/category/import")}}' //上传接口
                ,done: function(res){
                    window.reload();
                    window.parent.show_stack_success(res.data.msg);
                }
                ,error: function(){
                    //请求异常回调
                }
            });
        });

        var postCategory = {
            saveCategory : function () {
                var name     = $("#name").val();
                var taxy     = '{{$type}}';
                var parent   = $("#parent").val();
                var descript = $("#descript").val();
                var icons    = $("#icons").val();
                var type     = 'add';
                post('{{url("admin/category/save")}}',{name:name,parent:parent,descript:descript,type:type,taxy:taxy,icons:icons},function (res) {
                    if(res.ret == 1){
                        window.parent.show_stack_success(res.data.msg);
                        location.reload();
                    }else{
                        window.parent.show_stack_error(res.msg);
                    }
                })
            }
        }

        var operate = {
            quickEdit:function (id) {
                $('#'+id+'-hidden').css('display','table-row');
                $('#'+id).css('display','none');
            },
            cancel:function (id) {
                $('#'+id+'-hidden').css('display','none');
                $('#'+id).css('display','table-row');
            },
            remove:function (id) {
                post('{{url("admin/category/remove")}}',{id:id},function (res) {
                    if(res.ret == 1){
                        window.parent.show_stack_success(res.data);
                        location.reload();
                    }else{
                        window.parent.show_stack_error(res.msg);
                    }
                })
            },
            update:function (id) {
                var name = $('#'+id+'-value').val();
                post('{{url("admin/category/name")}}',{name:name},function (res) {
                    if(res.ret == 1){
                        window.parent.show_stack_success(res.data);
                        $(id+'-name').text(res.data.name);
                    }else{
                        window.parent.show_stack_error(res.msg);
                    }
                })
            }
        }
        $("tr").hover(function (e) {
            $(this).find('span').css('display','inline-block');
        },function (e) {
            $(this).find('span').css('display','none');
        })
    </script>
@endsection